<template>
  <div id="contain">
    <a-button
      class="u-btn"
      style="background-color: #ff6a00 !important; border-color: #ff6a00; color: #fff"
      type="default"
      @click="addRecord"
      ><a-icon type="add" />新增联系人</a-button
    >
    <a-table id="table" :columns="columnsList" :data-source="list" :scroll="{ y: 400 }">
      <span slot="action" slot-scope="text, index, record">
        <a @click="showRenameItem(record, index)">编辑</a>
        <a-divider type="vertical" />
        <a @click="showRelItem(record, index)">解除关联</a>
        <a-divider type="vertical" />
        <a @click="showDeleteItem(record, index)">删除</a>
      </span>
    </a-table>
    <crm-contacts-modal
      v-if="postParams.businessId"
      ref="contract"
      :businessId="postParams.businessId"
      @ok="getDetail"
    ></crm-contacts-modal>
  </div>
</template>

<script>
import { getAction } from '@/api/manage'
import axios from 'axios'
import CrmContactsModal from '../../contacts/modules/CrmContactsModal.vue'
export default {
  name: 'RelativeContacts',
  props: {
    /** 模块ID */
    id: [String, Number],
  },
  data() {
    return {
      showUploadList: false,
      // 重命名
      renameVisible: false,
      uploadText: '上传',
      columnsList: [
        {
          title: '联系人姓名',
          dataIndex: 'name',
          key: 'name',
        },
        {
          title: '手机',
          dataIndex: 'mobile',
          key: 'mobile',
          width: 100,
        },
        {
          title: '邮箱',
          dataIndex: 'email',
          key: 'email',
        },
        {
          title: '职务',
          key: 'post',
          dataIndex: 'post',
        },
        {
          title: '操作',
          key: 'action',
          scopedSlots: { customRender: 'action' },
        },
      ],
      list: [],
      postParams: {
        businessId: this.id,
      },
      newName: '',
      fileId: '',
      url: {
        pagingCrmContacts: '/online/api/pagingCrmContacts',
        deleteCrmContacts: '/online/upload/deleteCrmContacts',
        updateCrmContacts: '/online/upload/updateCrmContacts',
      },
    }
  },
  components: {
    CrmContactsModal,
  },
  watch: {
    id: {
      // immediate: true,
      deep: true,
      handler(val) {
        this.list = []
        this.getDetail(val)
      },
    },
  },
  created() {
    this.getDetail()
  },
  methods: {
    getDetail(id) {
      const params = {}
      params[`businessId`] = id
      getAction(this.url.pagingCrmContacts, params)
        .then((res) => {
          if (res.success) {
            this.list = res.result.records
          }
        })
        .catch(() => {})
    },
    addRecord() {
      this.$refs['contract'].add()
    },
    showRelItem(index, record) {
      const that = this
      record.businessId = ''
      this.$confirm({
        title: '提示',
        content: '您确定要取消关联吗？',
        okText: '确定',
        okType: 'danger',
        cancelText: '取消',
        onOk() {
          getAction(that.url.updateCrmContacts, record).then((res) => {
            if (res.success) {
              that.$message.success('成功！')
              that.getDetail()
            } else {
              that.$error(res.message)
            }
          })
        },
        onCancel() {},
      })
    },
    // 删除操作
    showDeleteItem(index, record) {
      const that = this
      this.$confirm({
        title: '提示',
        content: '您确定要删除吗？',
        okText: '确定',
        okType: 'danger',
        cancelText: '取消',
        onOk() {
          getAction(that.url.deleteCrmContacts, { id: record.id }).then((res) => {
            if (res.success) {
              that.$message.success('成功！')
              that.getDetail()
            } else {
              that.$error(res.message)
            }
          })
        },
        onCancel() {},
      })
    },
    showRenameItem(index, record) {
      this.$refs['contract'].edit(record)
    },
  },
}
</script>

<style lang="less" scoped>
#contain {
  position: relative;
  .u-btn {
    position: absolute;
    top: 0;
    right: 0;
  }
  #table {
    position: absolute;
    top: 50px;
  }
}
/deep/ .ant-btn {
  color: #fff;
  background-color: #168a40;
  border-color: #168a40;
}
/deep/ .ant-table {
  border: 1px solid rgb(230, 230, 230);
}
</style>